<template>
    <div class="service-center">
        <div class="img-wrap">
            <img src="https://cdn.swellpro.com/service/service_1.jpg" alt="">
            <div class="img-content">
                <h1>
                    Service Center<br>
                    <span>We are here to help</span>
                </h1>
            </div>
        </div>

        <h1>Swellpro’s Authorised Service and Repair Centres</h1>

        <div class="container">
           <div class="flagItem flag-2">
            <div class="bluePot"></div>America
            <div class="hideFlagContent otherHideFlagContent">
             <div>
              <p>Company: Urban Drones - UrbanDrones.com (Official Distributor, sales and dealer service center for U.S.A and Canada)</p>
              <p>Address: 12201 NW 35 Street. Suite 220. Coral Springs, FL 33065</p>
              <p>Website: UrbanDrones.com</p>
              <p>Manager: Carlo V.</p>
              <p>Mail: Support@UrbanDrones.com</p>
              <p>Phone: 954-213-4977</p>
             </div>
            </div>
            <div class="otherLead"></div>
           </div>
           <div class="flagItem flag-3">
            <div class="bluePot"></div>Spain
            <div class="hideFlagContent otherHideFlagContent">
             <div>
              <p>Company:Barcelona Drone Sistems And Security Sl ( Official Technical Service of Europe And Exclusive Distributor of Spain )</p>
              <p>Contact:Mr.Pedro Ramirez Tena</p>
              <p>Phone:+34 931 139 519</p>
              <p>Email:info@eswellpro.com</p>
             </div>
            </div>
            <div class="otherLead"></div>
           </div>
           <div class="flagItem flag-5">
            <div class="bluePot"></div>South Africa
            <div class="hideFlagContent">
             <div>
              <p>Company : SkyCorp Distributions</p>
              <p>Address: Bella Rosa Office Park. South Africa</p>
              <p>Phone : +27 (0) 72 214 4389</p>
              <p>Email : support@swellpro.co.za</p>
             </div>
            </div>
            <div class="lead"></div>
           </div>
           <div class="flagItem flag-10">
            <div class="bluePot"></div>korea
            <div class="hideFlagContent">
             <div>
              <p>Company : Total Survey Solution</p>
              <p>Address : Deajeon Korea</p>
              <p>Contact : Peter.Kim </p>
              <p>E-mail : swellpro.korea@gmail.com</p>
              <p>Phone : +82 10 8935 4540</p>
             </div>
            </div>
            <div class="lead"></div>
           </div>
           <div class="flagItem flag-6">
            <div class="bluePot"></div>Australia
            <div class="hideFlagContent">
             <div>
              <p>Company:UAV Wholesale</p>
              <p>Contact:Matt James</p>
              <p>Factory 4/ 2 Dawson St, Sale, 3850</p>
              <p>Email:info@uavwholesale.com.au</p>
              <p>Phone:(03) 51433451</p>
             </div>
            </div>
            <div class="lead"></div>
           </div>
           <div class="flagItem flag-7">
            <div class="bluePot"></div>China
            <div class="hideFlagContent">
             <div>
              <p>Company:Swellpro Technology Co.Ltd</p>
              <p>Address:ShenZhen,China.</p>
              <p>Contact:Mr Kevin</p>
              <p>Mail:support@swellpro.com</p>
              <p>Phone:+86-755-86622175</p>
             </div>
            </div>
            <div class="lead"></div>
           </div>
           <div class="flagItem flag-8">
            <div class="bluePot"></div>New Zealand
            <div class="hideFlagContent">
             <div>
              <p>Company:JCMattew NZ Ltd.</p>
              <p>Contact:Mr.Milton Frear</p>
              <p>Add:Unit 2,6 Airborne Road,Rosedale,Auckland 0632,New Zealand</p>
              <p>Email:sales@jcmatthew.co.nz</p>
              <p>Phone:+64 9 4433758</p>
              <p>Website: www.splashdrone.co.nz</p>
             </div>
            </div>
            <div class="lead"></div>
           </div>
           <div class="flagItem flag-9">
            <div class="bluePot"></div>United Kingdom
            <div class="hideFlagContent">
             <div>
              <p>Company: Dolphin Drones</p>
              <p>Contact: Nicholas</p>
              <p>Phone: +44 1305 300413</p>
              <p>Email: admin@dolphindrones.co.uk</p>
              <p>Website: http://www.dolphindrones.co.uk/</p>
              <p>Address: 209 Abbotsbury Road, Weymouth, Dorset, DT4 0LY UK</p>
             </div>
            </div>
            <div class="lead"></div>
           </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },

  head() {
    return {
        title: 'Service Center - Swellpro',
        meta: [
            { hid: 'description', name: 'description', content: 'Service Center'},
        ]
    }
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {}
}

</script>
<style lang='stylus' scoped>
.service
    &-center
        padding-bottom 50px
        h1
            font-size 25px
            font-weight 100
            padding 50px 0
            text-align center
        .img
            &-wrap
                position relative
                >img
                    display block
                    width 100%
            &-content
                position absolute
                color #fff
                left 0px
                top 0px
                width 100%
                height 100%
                display flex
                justify-content center
                align-items center
                h1
                    font-size 37px
                    font-weight 300
                    span
                        padding-top 10px
                        font-size 20px
                        display block
                        text-align center
        .container
            background-repeat no-repeat
            background-size cover
            background-position 50%
            background-image url('https://cdn.swellpro.com/services.png')
            height 600px
            position relative
            .flagItem
                position absolute
                &:hover
                    cursor pointer
                    .hideFlagContent
                        max-height 1000px
                    .lead
                        border-top-width 20px
                    .otherLead
                        border-bottom-width 20px
                .bluePot
                    background #469ce7
                    width 15px
                    height 15px
                    border-radius 50%
                    display inline-block
                    position relative
                    top 2px
                    margin-right 5px
                .hideFlagContent
                    position absolute
                    background #90cdf0
                    width 350px
                    bottom 40px
                    left -172.5px
                    max-height 0
                    transition all .3s
                    overflow hidden
                    box-sizing border-box
                    padding 0 15px
                    color #fff
                    font-size 15px
                    border-radius 15px
                    >div
                        padding 15px 0
                .otherHideFlagContent
                    top 40px
                    bottom auto
                .otherLead
                    position absolute
                    width 0
                    height 0
                    top 20px
                    left -7.5px
                    border-bottom 20px solid #90cdf0
                    border-left 15px solid transparent
                    border-right 15px solid transparent
                    border-bottom-width 0
                .lead
                    position absolute
                    width 0
                    height 0
                    bottom 20px
                    left -7.5px
                    border-top 20px solid #90cdf0
                    border-left 15px solid transparent
                    border-right 15px solid transparent
                    border-top-width 0
            .flag-1
                left 235px
                top 140px
            .flag-2
                left 235px
                top 205px
            .flag-3
                top 160px
                left 515px
            .flag-4
                top 140px
                left 580px
            .flag-5
                top 420px
                left 630px
            .flag-6
                top 460px
                right 40px
            .flag-7
                top 220px
                left 970px
            .flag-8
                bottom 62px
                right -45px
            .flag-9
                top 85px
                left 532px
            .flag-10
                top 174px
                left 1000px
</style>